<template>
  <div>
    {{ $t("message.hello") }}
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <!-- 增加操作列 -->
      <el-table-column label="操作">
        <!-- slot-scope：这一行信息 -->
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            icon="el-icon-edit-outline"
            circle
            @click="editRow(scope)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteRow(scope)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="编辑"
      :visible.sync="drawerConfig.drawer"
      :direction="drawerConfig.direction"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="drawerConfig.formData" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="drawerConfig.formData.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="drawerConfig.formData.address"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="drawerEditCancel">取 消 </el-button>
        <el-button type="primary" @click="drawerEditOk"> 确 定 </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Demo_1",
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "张三",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎——2",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎-3",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      drawerConfig: {
        drawer: false,
        direction: "rtl",
        formData: {
          date: "",
          name: "",
          address: "",
        },
      },
    };
  },

  methods: {
    // 弹窗取消
    drawerEditCancel() {
      this.drawerConfig.drawer = false;
    },
    // 弹窗确定
    drawerEditOk() {
      // 解构数据
      let { id, name, address } = this.drawerConfig.formData;
      // 根据id去tableData里面找对应数据
      let findItem = this.tableData.find((item) => item.id === id);
      // 赋值
      findItem.name = name;
      findItem.address = address;
      this.drawerConfig.drawer = false;
    },
    // 编辑的方法
    editRow({ row }) {
      console.log(row);
      // 深拷贝数据
      this.drawerConfig.formData = JSON.parse(JSON.stringify(row));
      this.drawerConfig.drawer = true;
    },
    // 删除的方法
    deleteRow({ row }) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 拿出id
          let { id } = row;
          // 根据id找到下标
          let findItemIndex = this.tableData.findIndex(
            (item) => item.id === id
          );
          // 根据下标删除数据
          this.tableData.splice(findItemIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭弹窗
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //   .then(() => {
      //     done();
      //   })
      //   .catch(() => {});
    },
  },
};
</script>
